<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>商品列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="#"></el-table-column>
			<el-table-column prop="id" label="头像">
				<template slot-scope="scope">
					<el-avatar :src="scope.row.avatar" :size="50"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="username" label="账号" sortable> </el-table-column>
			<el-table-column prop="fullname" label="姓名" sortable></el-table-column>
			<el-table-column prop="sex" label="性别" sortable></el-table-column>
			<el-table-column prop="tel" label="手机" sortable></el-table-column>
			<el-table-column prop="inventory" label="角色" sortable>
				<template slot-scope="scope">
					<el-button :type="scope.row.id==1?'danger':'primary'" size="mini" plain>{{scope.row.role_name}}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="login_time" label="上次登录" sortable></el-table-column>
			<el-table-column prop="login_count" label="登录次数" sortable></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" @click="handleOpen(scope.row.id,scope.row)" plain>
					</el-button>
					<el-button type="danger" icon="el-icon-delete" @click="handleRemove(scope.row.id)" plain
						:disabled="scope.row.role==1"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="修改信息" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<el-form :model="form" :rules="rules" ref='form' label-width="80px">
				<el-form-item label="姓名" prop="fullname">
					<el-input v-model="form.fullname"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="form.sex" prop="sex">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机" prop="tel">
					<el-input v-model="form.tel"></el-input>
				</el-form-item>
				<el-form-item label="权限" prop="role_name">
					<el-select v-model="form.role_name">
						<el-option v-for="(item,index) in roleForm" :label="item.name" :value="item.name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="头像" prop="avatar">
					<single-upload :src.sync='form.avatar' upload-action='/api/upload/common/'
						default-image='http://localhost:3003/images/avatar/default.jpg' remove-action='/api/upload'
						:headers='header' :data="{type:'avatar'}"></single-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
	import { Admin, User, Role } from '@/api/';
	import singleUpload from '@/components/SingleUpload.vue';

	export default {
		components: {
			singleUpload
		},
		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`
				},
				dialogVisible: false,
				tableData: [],
				form: {},
				roleForm: {},
				rules: {
					role_name: [
						{ required: true, message: '请选择权限', trigger: "blur" },
					],
					fullname: [
						{ required: true, message: '请输入昵称', trigger: "blur" },
						{ min: 2, max: 30, message: '昵称长度在2到30字符之间', trigger: "blur" },
					],
					avatar: [
						{ required: true, message: '请上传头像', trigger: "blur" },
					],
					tel: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					]
				},
			}
		},
		created() {
			this.loadAdmin();
		},
		methods: {
			handleRemove(id) {

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					type: 'warning'
				}).then(async () => {
					let { status } = await User.remove({ id });
					if (status) {
						this.$message.success('删除成功！')
						this.loadAdmin();
					} else {
						this.$message.error('删除失败！')
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			async handleSave() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						let { status } = await User.edit({ ...this.form })
						if (status) {
							this.$message.success('修改成功！')
							this.dialogVisible = false;
							this.loadAdmin();
						} else {
							this.$message.error('修改失败！')
						}
					}
				})
			},

			async handleRole() {
				let { status, data } = await Role.list();
				this.roleForm = data;
			},

			async handleOpen(id, row) {
				let { status, data } = await User.info({ id });
				if (status) {
					this.form = data;
					this.dialogVisible = true;
					this.handleRole();
				}
			},
			async loadAdmin() {
				let { status, data } = await Admin.list();
				this.tableData = data;
			}
		}
	}
</script>

<style lang="less" scoped>
	.box-card {
		.img-size {
			width: 90px;
			height: 90px;
			border: 1px solid #eee;
			box-sizing: border-box;
		}
	}
</style>
